<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-tabs">
			<scroll-view class="tab-scroll" scroll-x="true" show-scrollbar="false">
				<view class="tab-item active">要闻</view>
				<view class="tab-item">推荐</view>
				<view class="tab-item">关注流</view>
				<view class="tab-item">24小时</view>
				<view class="tab-item">娱乐</view>
				<view class="tab-item">桂林</view>
				<view class="tab-item">财经</view>
			</scroll-view>
		</view>

		<!-- 天气和搜索栏 -->
		<view class="weather-search">
			<view class="weather-info">
				<text class="temperature">4℃ 小雨</text>
				<text class="location">桂林 PM2.5 9</text>
			</view>
			<view class="search-box">
				<input class="search-input" placeholder="搜索关键词" />
			</view>
		</view>

		<!-- 更新提示 -->
		<view class="update-tip">
			<text>为您更新了15条内容</text>
		</view>

		<!-- 新闻列表 -->
		<view class="news-list">
			<!-- 置顶新闻1 -->
			<view class="news-item top-news">
				<view class="news-content">
					<text class="news-title">2020，我们温暖的记忆</text>
					<view class="news-meta">
						<text class="top-tag">置顶</text>
						<text class="news-source">新闻联播</text>
						<text class="comment-count">405评</text>
					</view>
				</view>
			</view>

			<!-- 置顶新闻2 -->
			<view class="news-item top-news">
				<view class="news-content">
					<text class="news-title">森林大县57年无大火是怎么做到的</text>
					<view class="news-meta">
						<text class="top-tag">置顶</text>
						<text class="news-source">光明网</text>
						<text class="comment-count">234评</text>
					</view>
				</view>
			</view>

			<!-- 普通新闻1 -->
			<view class="news-item">
				<view class="news-content">
					<text class="news-title">几年近疯狂，涉案金额超3亿，一个"背包客"牵出全国跨省"倒烟"大案</text>
					<view class="news-meta">
						<text class="news-source">新京报官微</text>
						<text class="comment-count">58评</text>
					</view>
				</view>
			</view>

			<!-- 普通新闻2 -->
			<view class="news-item">
				<view class="news-content">
					<text class="news-title">中国老年化水平加速，论养老保险在中国的重要性？人们应不应该买保险？</text>
					<view class="news-meta">
						<text class="news-source">新京报官微</text>
						<text class="comment-count">58评</text>
					</view>
				</view>
			</view>

			<!-- 广告 -->
			<view class="news-item ad-news">
				<view class="news-content">
					<text class="news-title">加微信交友群，喜欢就聊，找喜欢的人</text>
					<view class="news-meta">
						<text class="ad-tag">广告</text>
						<text class="news-source">我主良缘文化</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="bottom-tabs">
			<view class="bottom-tab-item">
				<text class="tab-text">全屏</text>
			</view>
			<view class="bottom-tab-item">
				<text class="tab-text">视频</text>
			</view>
			<view class="bottom-tab-item">
				<text class="tab-text">话题</text>
			</view>
			<view class="bottom-tab-item">
				<text class="tab-text">未登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可以在这里添加数据
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	/* 顶部导航栏 */
	.nav-tabs {
		background: white;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.tab-scroll {
		white-space: nowrap;
		width: 100%;
	}

	.tab-item {
		display: inline-block;
		padding: 0 30rpx;
		font-size: 32rpx;
		color: #666;
		line-height: 60rpx;
	}

	.tab-item.active {
		color: #ff0000;
		font-weight: bold;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: #ff0000;
		border-radius: 2rpx;
	}

	/* 天气和搜索栏 */
	.weather-search {
		background: white;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
	}

	.weather-info {
		display: flex;
		flex-direction: column;
	}

	.temperature {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.location {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.search-box {
		flex: 1;
		margin-left: 40rpx;
	}

	.search-input {
		background: #f5f5f5;
		border-radius: 30rpx;
		padding: 16rpx 30rpx;
		font-size: 28rpx;
		text-align: center;
	}

	/* 更新提示 */
	.update-tip {
		background: white;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.update-tip text {
		font-size: 26rpx;
		color: #999;
	}

	/* 新闻列表 */
	.news-list {
		background: white;
	}

	.news-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.news-title {
		font-size: 34rpx;
		color: #333;
		line-height: 1.5;
		display: block;
		margin-bottom: 20rpx;
	}

	.news-meta {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.top-tag {
		background: #ff0000;
		color: white;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		font-size: 22rpx;
	}

	.news-source {
		margin-right: 20rpx;
	}

	.comment-count {
		color: #999;
	}

	/* 广告新闻 */
	.ad-news {
		background: #f8f8f8;
	}

	.ad-tag {
		background: #ff6b00;
		color: white;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		font-size: 22rpx;
	}

	/* 底部导航 */
	.bottom-tabs {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		display: flex;
		border-top: 1rpx solid #eee;
		padding: 20rpx 0;
	}

	.bottom-tab-item {
		flex: 1;
		text-align: center;
	}

	.tab-text {
		font-size: 24rpx;
		color: #666;
	}
</style>